Created: 20/09/2016
By: UXLiner
Email: UXLiner
Hi! Thank you for purchasing my template.
If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This file will teach you how to set up and use the “PageLine” Theme.
Best regards,
UXLiner
This theme is a Responsive HTML5 / CSS3 for Desktop, tablet, mobile phone…
All of the information within the main content area is nested within a div with an class of "container".
The sidebar's content is within a div with an class of "content-right-sidebar".
The general template structure is the same throughout the template.
The html are commented well so you can easily make an update.
<!-- HEADER -->
Top area, display logo, navigation and slideshow. This navigation improves the css dropdown menu with animation. The navigation is nested within a div with an class of "menu", you can change the navigation by change the <li> url and text. This is similar for all pages.
NAVIGATION MENU
<ul>SLIDES CONTAINER
<li><a href="index.html" title="Home">Home</a><li>
<li><a href="#">Home</a>
<ul>
<li><a href="index.html">Home Default</a></li>
<li><a href="index-1.html">Home Style 2</a></li>
<li><a href="index-2.html">Home Style 3</a></li>
<li><a href="index-3.html">Home Style 4</a></li>
</ul>
</li>
<li><a href="#">Pages</a>
<ul>
<li><a href="about-us.html">About Us</a> </li>
<li><a href="team.html">Team Member</a></li>
<li><a href="left-sidebar.html">Left Sidebar Page</a></li>
<li><a href="right-sidebar.html">Right Sidebar Page</a></li>
<li><a href="login.html">Login Form</a></li>
<li><a href="register.html">Registration Form</a></li>
<li><a href="404.html">404 Error Page</a></li>
</ul>
<div class = 'item item1'>
<div class = 'inner'>
<div class = 'text1'><span>Welcome to <b>PageLine</b></span></div>
<div class = 'text2'><span>PageLine Provides Smart and Flexible Design Unique Pages,<br />Awesome Slideshows, Unique Color Variations.<br />Easy-to-customize and fully Featured design.<br />Create Outstanding Website in Minutes!</span>
<div class="morebut"><a href="#">know more features</a></div>
</div>
</div>
</div>
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
#container a {
color: #someColor;
}
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.
So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.
This "PageLine" theme uses 5 main CSS files:
I'm using three CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The second file contains all of the specific stylings for the page. The file is separated into sections using:
How to Use Diffrent Colors Themes
We are Providing 10 Predefined Colors for this Theme. If you want to use Diffrent Colors for this theme... Go to Header Section of "index.html" page. There you can find the Commented code of the colors. You can just remove the comments witch color skin you want to use. (like this you can do rest of the pages as well).
All the CSS is commented and separated in categories so it is really easy to find what you want.
/* === HEADER Section === */
.site-wrapper {
background: #fff;
margin: auto;
overflow: hidden;
width:100%;
}
.logo_holder {
float: left;
width: 100%;
height: 64px;
}
/* Logo */
.navbar-brand.logo {
background: url(../images/logo.png) no-repeat left 19px;
}
/* === BODY Section === */
.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header { margin:0;
}
.container, .container-fluid {
padding-left:0;
padding-right:0;
}
/* === FOOTER === */
footer {
width: 100%;
float: left;
padding:70px 0 30px 0;
margin:0;
color:#727272;
}
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
Any images that are placed within the blog section have 5px worth of padding and a light bluish background. If you would like to edit the display of these images, find the following section in the style sheet:
#wrapper #blog img {
change styles here:
}
This theme imports three Javascript files.
$name_of_your_site = "yourcompanyname.com"
$email_adress_reciever = "UXLiner9@gmail.com"
We've included 10 psd with this theme:
If you'd like to change the logo in the header, open "01_homepage.psd", make the necessary adjustments, and then save the file as "logo.jpg" or "logo.png". Do the same for the buttons.
With these psds you can even create your own unique “PageLine” skin.
You add new fonts by adding them to your Fonts folder in your computers Control Panel or right click font file and "Install".
Resources used:
If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.
To keep in touch with my latest PSD and HTML templates make sure to check out http://themeforest.net/user/UXLiner frequently.
Best regards,
UXLiner